<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <el-form
      class="register"
      ref="ruleFormRef"
      :model="userInfo"
      status-icon
      :rules="registerRules"
      label-width="40%"
    >
      <h3>
        注册新用户
        <span class="go"
          >我有账号，去 <router-link to="/login">登录</router-link>
        </span>
      </h3>
      <el-form-item prop="phone" label="手机号" class="elFormItem">
        <el-input
          placeholder="请输入你的手机号"
          v-model="userInfo.phone"
          class="elInput"
      /></el-form-item>
      <el-form-item prop="code" label="验证码" class="elFormItem">
        <el-input
          type="text"
          placeholder="请输入验证码"
          v-model="userInfo.code"
          class="elInput"
        />
        <el-button
          type="default"
          @click="getCodeByPhone"
          style="margin-left: 5px"
          icon="search"
          >获取验证码</el-button
        >
      </el-form-item>
      <el-form-item prop="password" label="登陆密码" class="elFormItem">
        <el-input
          class="elInput"
          type="text"
          placeholder="请输入你的登录密码"
          v-model="userInfo.password"
      /></el-form-item>
      <el-form-item prop="re_password" label="确认密码" class="elFormItem">
        <el-input
          class="elInput"
          type="text"
          placeholder="请输入确认密码"
          v-model="userInfo.re_password"
      /></el-form-item>
      <el-form-item prop="agree" class="elFormItem">
        <el-checkbox name="m1" type="checkbox" v-model="userInfo.agree" />
        <span>同意协议并注册《尚品汇用户协议》</span>
      </el-form-item>
      <el-form-item>
        <div class="btn">
          <button @click.prevent="registerHandle(ruleFormRef)">完成注册</button>
        </div>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
      <div class="beian">京ICP备19006430号</div>
    </div>
  </div>
</template>


<script >
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "Register",
});
</script>

<script setup>
import { ref, reactive } from "vue";
import { reqGetCode, reqRegister } from "@/api/register";
import { phoneReg, codeReg, pwdReg } from "@/utils/reg";
import "element-plus/es/components/message/style/css";
import { useRouter, useRoute } from "vue-router";

// data
const userInfo = reactive({
  phone: "", //手机号
  code: "", //验证码
  password: "", //密码
  re_password: "", //重复密码
  agree: false, //是否同意协议
});
// router
const router = useRouter();

// ref
const ruleFormRef = ref();

// 校验规则
//
const validatePhone = (rule, value, callback) => {
  if (!phoneReg.test(value)) {
    callback(new Error("号码格式不正确"));
  } else {
    callback();
  }
};
const validatePassword = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error("密码长度不能小于6位"));
  } else {
    callback();
  }
};
const validateCode = (rule, value, callback) => {
  if (!value.length) {
    callback(new Error("请输入手机号码获取验证码"));
  } else {
    callback();
  }
};
const validateRePassword = (rule, value, callback) => {
  if (!value || value != userInfo.password) {
    callback(new Error("请确认是否与登陆密码一致"));
  } else {
    callback();
  }
};
const validateAgree = (rule, value, callback) => {
  if (value != true) {
    console.log(123);
    callback(new Error("请仔细阅读并同意协议"));
  } else {
    callback();
  }
};
// 匹配校验规则
const registerRules = {
  phone: [{ required: true, validator: validatePhone }],
  code: [{ required: true, validator: validateCode }],
  password: [{ required: true, validator: validatePassword }],
  re_password: [
    { required: true, trigger: "blur", validator: validateRePassword },
  ],
  agree: [{ required: true, trigger: "change", validator: validateAgree }],
};

// 获取验证码点击事件——获取验证码按钮
const getCodeByPhone = async () => {
  // 简单校验
  const phone = userInfo.phone;
  if (!phone.trim() || !phoneReg.test(phone))
    return ElMessage({
      message: "请填写手机号！",
      type: "warning",
    });
  const result = await reqGetCode(phone);
  if (result.code == 200) {
    userInfo.code = result.data;
    ElMessage.success("验证码发送成功");
  } else {
    ElMessage.error(result.msg);
  }
};

// 用户注册——注册按钮
const registerHandle = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { phone, code, password, re_password, agree } = userInfo;
      const params = { phone, code, password };
      const result = await reqRegister(params);
      if (result.code == 200) {
        ElMessage.success("注册成功");
        router.push("/login");
      } else {
        ElMessage.error(result.message);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>


<style lang="less" scoped>
.register-container {
  .register {
    width: 1200px;
    height: 445px;
    border: 1px solid rgb(223, 223, 223);
    margin: 0 auto;

    h3 {
      background: #ececec;
      margin: 0;
      padding: 6px 15px;
      color: #333;
      border-bottom: 1px solid #dfdfdf;
      font-size: 20.04px;
      line-height: 30.06px;

      span {
        font-size: 14px;
        float: right;

        a {
          color: #e1251b;
        }
      }
    }

    div:nth-of-type(1) {
      margin-top: px;
    }

    .content {
      padding-left: 390px;
      position: relative;

      label {
        font-size: 14px;
        width: 96px;
        text-align: right;
        display: inline-block;
      }

      input {
        width: 270px;
        height: 38px;
        padding-left: 8px;
        box-sizing: border-box;
        margin-left: 5px;
        outline: none;
        border: 1px solid #999;
      }

      img {
        vertical-align: sub;
      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .controls {
      text-align: center;
      position: relative;
      left: 40%;

      input {
        margin: -3px 5px 0 0;
      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .btn {
      text-align: center;
      line-height: 36px;

      button {
        outline: none;
        width: 270px;
        height: 36px;
        background: #e1251b;
        color: #fff !important;
        display: inline-block;
        font-size: 16px;
      }
    }

    .getcode {
      height: 38px;
      margin-left: 10px;
      padding: 5px;
    }
  }

  .copyright {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    line-height: 24px;

    ul {
      li {
        display: inline-block;
        border-right: 1px solid #e4e4e4;
        padding: 0 20px;
        margin: 15px 0;
      }
    }
  }
  .elInput {
    width: 300px;
    margin-left: 5px;
  }
  .elFormItem {
    margin: 30px 0px;
  }

  /deep/.el-form-item__error {
    left: 10px;
  }
}
</style>